// 导入：类型、接口、模块、组件、样式
import { Component } from "react";
interface Props {}
interface State {}
class Index extends Component<Props, State> {
  //   键 = 值

  state = {
    num: 0,
  };

  // 留心1：render中写函数名 必须加上this 否则他会去render中 找不到
  // 留心2：要写箭头函数 否则this  undefined
  //   onIncr() {
  onIncr = () => {
    // console.log(this);  必须写箭头否则会有this指向问题
    this.setState({
      num: this.state.num - 1,
    });
  };

  render() {
    // this 组件实例  state/props/refs/setState
    return (
      <fieldset>
        <legend>09-合成事件</legend>
        <h1>{this.state.num}</h1>
        <button onClick={this.onIncr}>-1</button>
        <button
          onClick={() => {
            // console.log(this);
            this.setState({ num: this.state.num + 1 });
          }}
        >
          +1
        </button>
      </fieldset>
    );
  }
}
export default Index;
